<template>
  <div class="home-page">
    <!-- 全屏视差滚动横幅 -->
    <div class="hero-section">
      <div class="hero-content">
        <h1>守护海洋生态</h1>
        <p>让我们共同参与海洋生态保护，为地球的未来尽一份力</p>
        <div class="hero-buttons">
          <el-button type="primary" size="large" @click="scrollToAction">
            立即行动
          </el-button>
          <el-button type="primary" size="large" plain @click="goToLogin">
            登录
          </el-button>
        </div>
      </div>
    </div>

    <!-- 数据统计卡片区 -->
    <div class="stats-section">
      <div class="stats-container">
        <div class="stat-card">
          <el-icon :size="40" color="#409EFF"><User /></el-icon>
          <div class="stat-number">125,000+</div>
          <div class="stat-label">注册志愿者</div>
        </div>
        <div class="stat-card">
          <el-icon :size="40" color="#67C23A"><Timer /></el-icon>
          <div class="stat-number">458,920</div>
          <div class="stat-label">服务时长(小时)</div>
        </div>
        <div class="stat-card">
          <el-icon :size="40" color="#E6A23C"><Location /></el-icon>
          <div class="stat-number">1,280</div>
          <div class="stat-label">保护区域</div>
        </div>
        <div class="stat-card">
          <el-icon :size="40" color="#F56C6C"><Star /></el-icon>
          <div class="stat-number">3,560</div>
          <div class="stat-label">完成项目</div>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 最新活动 -->
      <section class="section-container activities-section">
        <h2 class="section-title">最新活动</h2>
        <div class="activities-grid">
          <activity-card v-for="activity in activities" :key="activity.id" :activity="activity" @signup="handleActivitySignup" />
        </div>
      </section>

      <!-- 新闻资讯 -->
      <section class="section-container news-section">
        <h2 class="section-title">新闻资讯</h2>
        <div class="news-grid">
          <div class="featured-news">
            <el-carousel height="400px">
              <el-carousel-item v-for="news in featuredNews" :key="news.id">
                <div class="featured-news-item" @click="viewNews(news.id)">
                  <el-image :src="news.image" fit="cover" />
                  <div class="news-overlay">
                    <h3>{{ news.title }}</h3>
                    <p>{{ news.summary }}</p>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="news-list">
            <div v-for="news in latestNews" :key="news.id" 
                 class="news-item" @click="viewNews(news.id)">
              <el-image :src="news.image" fit="cover" />
              <div class="news-content">
                <h4>{{ news.title }}</h4>
                <p>{{ news.date }}</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 志愿者地图 -->
      <section class="section-container map-section">
        <h2 class="section-title">志愿者分布</h2>
        <volunteer-map />
      </section>

      <!-- 知识科普 -->
      <section class="section-container knowledge-section">
        <h2 class="section-title">海洋知识</h2>
        <div class="knowledge-grid">
          <el-card v-for="item in knowledgeItems" :key="item.id" 
                  class="knowledge-card" @click="viewKnowledge(item.id)">
            <el-image :src="item.image" fit="cover" />
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </el-card>
        </div>
      </section>
    </div>

    <!-- 行动召唤区 -->
    <div class="cta-section">
      <div class="cta-content">
        <h2>加入我们，守护海洋</h2>
        <p>每个人的行动都很重要，让我们一起为海洋生态保护贡献力量</p>
        <el-button type="primary" size="large" @click="register">
          成为志愿者
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { User, Timer, Location, Star, Calendar, View } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import ActivityCard from '@/components/ActivityCard.vue'
import VolunteerMap from '@/components/VolunteerMap.vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 活动数据
const activities = ref([
  {
    id: 1,
    title: '海滩清洁日',
    description: '组织志愿者清理海滩垃圾，保护海洋环境，欢迎市民参与',
    image: 'https://images.unsplash.com/photo-1621451537084-482c73073a0f?w=800',
    date: '2024-04-15',
    location: '深圳湾海滩',
    status: 'upcoming',
    statusText: '即将开始'
  },
  {
    id: 2,
    title: '珊瑚礁保护计划',
    description: '专业团队带领志愿者进行珊瑚礁监测和保护工作',
    image: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800',
    date: '2024-04-20',
    location: '三亚亚龙湾',
    status: 'ongoing',
    statusText: '报名中'
  },
  {
    id: 3,
    title: '海龟救助行动',
    description: '救助受伤的海龟，并进行康复训练和放生活动',
    image: 'https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?w=800',
    date: '2024-04-25',
    location: '海南文昌',
    status: 'ongoing',
    statusText: '报名中'
  }
])

// 新闻数据
const featuredNews = ref([
  {
    id: 1,
    title: '全球海洋生态保护峰会在深圳召开',
    summary: '来自50个国家的专家学者共同探讨海洋生态保护策略',
    image: 'https://images.unsplash.com/photo-1559494007-9f5847c49d94?w=800',
    date: '2024-03-20'
  },
  {
    id: 2,
    title: '我国首个深海生态保护区正式设立',
    summary: '标志着我国海洋生态保护工作迈上新台阶',
    image: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800',
    date: '2024-03-18'
  }
])

const latestNews = ref([
  {
    id: 3,
    title: '海洋塑料污染治理取得突破性进展',
    image: 'https://images.unsplash.com/photo-1621451537084-482c73073a0f?w=800',
    date: '2024-03-15'
  },
  {
    id: 4,
    title: '全国青少年海洋科普教育计划启动',
    image: 'https://images.unsplash.com/photo-1559494007-9f5847c49d94?w=800',
    date: '2024-03-12'
  },
  {
    id: 5,
    title: '海洋生物多样性保护研究获重要成果',
    image: 'https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?w=800',
    date: '2024-03-10'
  }
])

// 知识科普数据
const knowledgeItems = ref([
  {
    id: 1,
    title: '海洋生态系统',
    description: '了解海洋生态系统的构成和保护方法',
    image: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=800'
  },
  {
    id: 2,
    title: '海洋污染防治',
    description: '海洋污染的类型、危害和防治措施',
    image: 'https://images.unsplash.com/photo-1621451537084-482c73073a0f?w=800'
  },
  {
    id: 3,
    title: '海洋生物多样性',
    description: '探索海洋生物的奇妙世界',
    image: 'https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?w=800'
  }
])

// 页面方法
const scrollToAction = () => {
  document.querySelector('.activities-section').scrollIntoView({ 
    behavior: 'smooth' 
  })
}

const viewNews = (id) => {
  router.push(`/news/${id}`)
}

const viewKnowledge = (id) => {
  router.push(`/knowledge/${id}`)
}

const register = () => {
  router.push('/register')
}

const handleActivitySignup = (activityId) => {
  console.log('报名活动:', activityId)
  ElMessage.success('报名成功！')
}

// 跳转到登录页
const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped lang="scss">
.home-page {
  .hero-section {
    height: 100vh;
    min-height: 600px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                url('https://images.unsplash.com/photo-1439405326854-014607f694d7?w=1920') center/cover fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    border-radius: 8px;

    .hero-content {
      max-width: 800px;
      padding: 0 20px;

      h1 {
        font-size: 4em;
        margin-bottom: 20px;
        animation: fadeInUp 1s ease;
      }

      p {
        font-size: 1.5em;
        margin-bottom: 30px;
        opacity: 0.9;
        animation: fadeInUp 1s ease 0.2s;
      }

      .el-button {
        padding: 15px 40px;
        font-size: 1.2em;
        animation: fadeInUp 1s ease 0.4s;
      }
    }
  }

  .stats-section {
    background: #fff;
    padding: 40px 0;
    margin-top: -80px;
    position: relative;
    z-index: 1;

    .stats-container {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      padding: 0 20px;

      .stat-card {
        background: white;
        padding: 30px;
        border-radius: 12px;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        transition: transform 0.3s;

        &:hover {
          transform: translateY(-5px);
        }

        .stat-number {
          font-size: 2.5em;
          font-weight: bold;
          margin: 15px 0;
          background: linear-gradient(45deg, #409EFF, #67C23A);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .stat-label {
          color: #606266;
          font-size: 1.1em;
        }
      }
    }
  }

  .main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px;

    .section-container {
      background: white;
      border-radius: 16px;
      padding: 40px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      
      &:not(:last-child) {
        margin-bottom: 60px;
      }

      .section-title {
        font-size: 2.5em;
        color: #303133;
        margin-bottom: 40px;
        text-align: center;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 60px;
          height: 3px;
          background: #409EFF;
        }
      }
    }

    .activities-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 40px;
    }

    .news-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 40px;

      .featured-news {
        .featured-news-item {
          position: relative;
          height: 400px;
          cursor: pointer;

          .el-image {
            width: 100%;
            height: 100%;
          }

          .news-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 30px;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;

            h3 {
              font-size: 1.8em;
              margin-bottom: 15px;
            }

            p {
              font-size: 1.1em;
              opacity: 0.9;
            }
          }
        }
      }

      .news-list {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .news-item {
          display: flex;
          gap: 15px;
          cursor: pointer;
          padding: 15px;
          border-radius: 8px;
          transition: background-color 0.3s;

          &:hover {
            background: #f5f7fa;
          }

          .el-image {
            width: 120px;
            height: 80px;
            border-radius: 4px;
          }

          .news-content {
            flex: 1;

            h4 {
              font-size: 1.1em;
              margin-bottom: 8px;
              color: #303133;
            }

            p {
              color: #909399;
              font-size: 0.9em;
            }
          }
        }
      }
    }

    .knowledge-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;

      .knowledge-card {
        cursor: pointer;
        transition: transform 0.3s;

        &:hover {
          transform: translateY(-5px);
        }

        .el-image {
          height: 200px;
          width: 100%;
          border-radius: 8px;
          margin-bottom: 15px;
        }

        h3 {
          font-size: 1.2em;
          margin-bottom: 10px;
          color: #303133;
        }

        p {
          color: #606266;
          line-height: 1.6;
        }
      }
    }
  }

  .cta-section {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
                url('https://images.unsplash.com/photo-1559494007-9f5847c49d94?w=1920') center/cover fixed;
    padding: 100px 0;
    text-align: center;
    color: white;

    .cta-content {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 20px;

      h2 {
        font-size: 3em;
        margin-bottom: 20px;
      }

      p {
        font-size: 1.2em;
        margin-bottom: 30px;
        opacity: 0.9;
      }

      .el-button {
        padding: 15px 40px;
        font-size: 1.2em;
      }
    }
  }
}

@media (max-width: 1400px) {
  .main-content {
    .knowledge-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 1200px) {
  .main-content {
    .news-grid {
      grid-template-columns: 1fr;
    }
  }
}

@media (max-width: 768px) {
  .main-content {
    .section-container {
      padding: 20px;
    }

    .activities-grid,
    .knowledge-grid {
      grid-template-columns: 1fr;
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}
</style> 